<template>
        <div class="page">  
          <div class="navbar">
              <div class="navbar-inner sliding">
                  <div class="left">
                      <a href="#" class="link back">
                          <i class="icon icon-back"></i>
                          <span class="ios-only">返回</span>
                      </a>
                  </div>
                  <div class="title">当日净增通话客户数占比</div>
              </div>
          </div>  
          <div class="page-content">
              <!-- <div class="row no-gap">
                  <div class="col-50"><input type="text" placeholder="请选择日期" readonly="readonly" id="demo-calendar-default1"/></div>
                  <div class="col-50"><input type="text" placeholder="请选择日期" readonly="readonly" id="demo-calendar-default2"/></div>
              </div> -->
              <div class="row no-gap">
                  <div class="col-100"><input type="text" placeholder="请选择日期" readonly="readonly" id="demo-calendar-default1"/></div>
              </div>
              <div class="data-table data-table-init table">
                  <table>
                      <thead>
                          <tr>
                              {{#each header}}
                                  <th class="label-cell">{{this}}</th>
                              {{/each}}
                          </tr>
                      </thead>
                      <tbody>
                          {{#each body}}
                              <tr>
                                  {{#each this}}
                                  <td class="label-cell">{{this}}</td>
                                  {{/each}}
                              </tr>
                          {{/each}}
                      </tbody>
                  </table>
              </div>
              <div id="line" class="chart" ></div>
              <div id="bar" class="chart" ></div>
              <div id="pie" class="chart" ></div>
          </div>
        </div>
      </template>
<style>
    .chart {
        height: 400px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }
    
    .table {
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }
    
    .row input[type="text"]:read-only {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        text-align: center;
        border: 1px solid #eee;
    }
</style>
<script>
    return {
        created() {
            // console.log('componentCreated', this)
        },
        mounted() {
            console.log('root', this.$root);
            // console.log('componentMounted', this);
            var calendarDefault1 = app.calendar.create({
                inputEl: '#demo-calendar-default1',
            });
            var calendarDefault2 = app.calendar.create({
                inputEl: '#demo-calendar-default2',
            });
            var self = this
            $$("#demo-calendar-default1").on("change", function(e) {
                //获取input输入的值
                console.log(e.target.value);
                // app.calendar.close()
                self.$setState({
                    bodyData: [230, 20, 472, 59, 39, 34, 59],
                });
                self.initBarChart()
                self.initLineChart()
                self.initPieChart()
            });

            setTimeout(function() {
                self.$setState({
                    body: [
                        ["A_长沙", 21730, 89220, 44572, 55339, 55339, 3944, 50539],
                        ["B_岳阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                        ["C_湘潭", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                        ["D_株洲", 217304, 82920, 46572, 5539, 55339, 3944, 50539],
                        ["G_常德", 21730, 89220, 44572, 55339, 55339, 3944, 50539],
                        ["H_益阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                        ["I_娄底", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                    ]
                })
            }, 500);

            this.initBarChart()
            this.initLineChart()
            this.initPieChart()
        },
        beforeDestroy() {
            // console.log('componentBeforeDestroy', this);
        },
        data: function() {
            return {
                name: 'framework7',
                title: "当日净增通话客户数占比",
                header: ["A_长沙", "B_岳阳", "C_湘潭", "D_株洲", "G_常德", "H_益阳", "I_娄底", "I_娄底"],
                body: [21730, 8920, 4572, 5539, 55339, 3944, 50539],
                barStyle: {
                    title: "当日净增通话客户数",
                    lengedTitle: "数值",
                    bodyColor: "#0384df",
                    fontHVal: "",
                    fontBVal: "",
                    xRotate: 0,
                    showX: true,
                    showY: true,
                    xFontSize: 12,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                },
                lineStyle: {
                    lengedTitle: "数值",
                    title: "当日净增通话客户数",
                    smooth: true,
                    bodyColor: "#0384df",
                    fontHVal: "",
                    fontBVal: "",
                    xRotate: 0,
                    showX: true,
                    showY: true,
                    xFontSize: 12,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                },
                bodyData: [21730, 8920, 4572, 5539, 55339, 3944, 50539],
                pieStyle: {
                    bodyColor1: "#0384df",
                    bodyColor2: "#86d8dd",
                    bodyColor3: "#9384df",
                    bodyColor4: "#0314df",
                    bodyColor5: "#0084df",
                    fontHVal: "",
                    fontBVal: "",
                    showX: true,
                    showY: true,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                }
            }
        },
        // Component Methods
        methods: {
            initLineChart(id, lineStyle, title, header, body, style) {
                let self = this;
                var myChart = echarts.init(document.getElementById("line"));
                var option = {
                    //提示框
                    tooltip: {
                        // //触发类型：坐标轴触发
                        trigger: "axis"
                    },
                    // 网格
                    grid: {
                        x: 55,
                        y: 40,
                        x2: 45,
                        y2: 40,
                        width: "83%",
                        height: "80%",
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1
                            // borderColor: "#ccc"
                    },
                    // 图表标题
                    title: {
                        text: this.lineStyle.title,
                        show: this.lineStyle.showTitle,
                        x: "center", // 水平安放位置，默认为左对齐，可选为：
                        // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}（x坐标，单位px）
                        y: "top", // 垂直安放位置，默认为全图顶端，可选为：
                        // 'top' ¦ 'bottom' ¦ 'center'
                        // ¦ {number}（y坐标，单位px）
                        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
                        padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
                        // 接受数组分别设定上右下左边距，同css
                        itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
                        textStyle: {
                            fontSize: this.lineStyle.fontHVal,
                            // fontWeight: 'bolder',
                            color: this.lineStyle.hColor // 主标题文字颜色
                        },
                        subtextStyle: {
                            color: "#aaa" // 副标题文字颜色
                        }
                    },
                    color: [this.lineStyle.bodyColor], //拆线的主颜色
                    legend: {
                        //指标位置
                        x: "left",
                        y: "top%",
                        padding: 10,
                        // itemWidth: 10,
                        // borderRadius: 20,
                        // width: 10,
                        textStyle: {
                            fontSize: 10
                        },
                        data: [this.lineStyle.lengedTitle]
                            // data: [self.bodyTitle, self.bodyTitle2]
                    },
                    calculable: true,
                    xAxis: [{
                        type: "category",
                        show: this.lineStyle.showX, //控制 X 坐标线是否显示
                        boundaryGap: true, //xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
                        axisLabel: {
                            interval: 0, //横轴信息隔几个显示
                            rotate: this.lineStyle.xRotate,
                            color: "#86939E", //刻度线标签颜色
                            textStyle: {
                                fontSize: this.lineStyle.xFontSize // 让字体变大
                            }
                        },
                        axisTick: {
                            //坐标轴刻度相关设置
                            show: true, //是否显示坐标轴刻度。
                            alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                            interval: "auto", //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                            inside: false //坐标轴刻度是否朝内，默认朝外。
                                // length:5,                //坐标轴刻度的长度。
                                // lineStyle:mylineStyle
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#e2e2e2",
                                width: 1 //这里是为了突出显示加上的
                            }
                        },
                        data: this.header
                    }],
                    yAxis: [{
                        type: "value",
                        show: this.lineStyle.showY, //控制 Y 坐标线是否显示
                        splitLine: {
                            // 控制网格线是否显示
                            show: false
                        },
                        axisLabel: {
                            color: "#86939E" //刻度线标签颜色
                        },
                        axisTick: {
                            //坐标轴刻度相关设置
                            show: true, //是否显示坐标轴刻度。
                            alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                            interval: "auto", //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                            inside: true //坐标轴刻度是否朝内，默认朝外。
                                // length:5,                //坐标轴刻度的长度。
                                // lineStyle:mylineStyle
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#e2e2e2",
                                width: 1 //这里是为了突出显示加上的
                            }
                        }
                    }],
                    series: [{
                            name: this.lineStyle.lengedTitle,
                            type: "line",
                            // stack: '总量',
                            smooth: this.lineStyle.smooth,
                            //symbol: null,         // 拐点图形类型
                            symbolSize: 5, // 拐点图形大小
                            //symbolRotate : null,  // 拐点图形旋转控制
                            showAllSymbol: false, // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
                            itemStyle: {
                                normal: {
                                    // color: 各异,
                                    label: {
                                        show: false
                                            // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                                            //           'inside'|'left'|'right'|'top'|'bottom'
                                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                    },
                                    lineStyle: {
                                        width: 2,
                                        type: "solid",
                                        shadowColor: "rgba(0,0,0,0)", //默认透明
                                        shadowBlur: 5,
                                        shadowOffsetX: 3,
                                        shadowOffsetY: 3
                                    }
                                },
                                emphasis: {
                                    // color: 各异,
                                    label: {
                                        show: false
                                            // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                                            //           'inside'|'left'|'right'|'top'|'bottom'
                                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                    }
                                }
                            },
                            data: this.bodyData
                        }] //放每一项展示的数据的
                };
                // 绘制图表
                myChart.setOption(option);
            },
            initBarChart() {
                var self = this;
                var myChart = echarts.init(document.getElementById("bar"));
                var option = {
                    //提示框
                    tooltip: {
                        //触发类型：坐标轴触发
                        trigger: "axis"
                    },
                    // 网格
                    grid: {
                        x: 55,
                        y: 40,
                        x2: 45,
                        y2: 40,
                        width: "83%",
                        height: "80%",
                        backgroundColor: "rgba(0,0,0,0)",
                        borderWidth: 1
                            // borderColor: "#ccc"
                    },
                    // 图表标题
                    title: {
                        text: this.barStyle.title,
                        show: this.barStyle.showTitle,
                        x: "center", // 水平安放位置，默认为左对齐，可选为：
                        // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}（x坐标，单位px）
                        y: "top", // 垂直安放位置，默认为全图顶端，可选为：
                        // 'top' ¦ 'bottom' ¦ 'center'
                        // ¦ {number}（y坐标，单位px）
                        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
                        // backgroundColor: 'rgba(0,0,0,0)',
                        // borderColor: '#ccc',       // 标题边框颜色
                        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
                        padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
                        // 接受数组分别设定上右下左边距，同css
                        itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
                        textStyle: {
                            fontSize: this.barStyle.fontHVal,
                            // fontWeight: 'bolder',
                            color: this.barStyle.hColor // 主标题文字颜色
                        },
                        subtextStyle: {
                            color: "#aaa" // 副标题文字颜色
                        }
                    },
                    color: [this.barStyle.bodyColor], //柱状的主颜色
                    legend: {
                        //指标位置
                        x: "left",
                        y: "top",
                        padding: 10,
                        // itemWidth: 10,
                        // borderRadius: 20,
                        // width: 10,
                        textStyle: {
                            fontSize: 10
                        },
                        data: [self.barStyle.lengedTitle]
                    },
                    calculable: true,
                    xAxis: [{
                        type: "category",
                        show: this.barStyle.showX, //控制 X 坐标线是否显示
                        boundaryGap: true, //xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
                        axisLabel: {
                            interval: 0, //横轴信息隔几个显示
                            rotate: this.barStyle.xRotate,
                            color: "#86939E", //刻度线标签颜色
                            textStyle: {
                                fontSize: this.barStyle.xFontSize // 让字体变大
                            }
                        },
                        axisTick: {
                            //坐标轴刻度相关设置
                            show: true, //是否显示坐标轴刻度。
                            alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                            interval: "auto", //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                            inside: false //坐标轴刻度是否朝内，默认朝外。
                                // length:5,                //坐标轴刻度的长度。
                                // lineStyle:mylineStyle
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#e2e2e2",
                                width: 1 //这里是为了突出显示加上的
                            }
                        },
                        data: this.header
                    }],
                    yAxis: [{
                        type: "value",
                        show: this.barStyle.showY, //控制 Y 坐标线是否显示
                        splitLine: {
                            // 控制网格线是否显示
                            show: false
                        },
                        axisLabel: {
                            color: "#86939E" //刻度线标签颜色
                        },
                        axisTick: {
                            //坐标轴刻度相关设置
                            show: true, //是否显示坐标轴刻度。
                            alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                            interval: "auto", //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                            inside: true //坐标轴刻度是否朝内，默认朝外。
                                // length:5,                //坐标轴刻度的长度。
                                // lineStyle:mylineStyle
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#e2e2e2",
                                width: 1 //这里是为了突出显示加上的
                            }
                        }
                    }],
                    series: [{
                            name: this.barStyle.lengedTitle,
                            type: "bar",
                            // stack: '总量',
                            smooth: true,
                            //symbol: null,         // 拐点图形类型
                            symbolSize: 51, // 拐点图形大小
                            //symbolRotate : null,  // 拐点图形旋转控制
                            showAllSymbol: false, // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
                            itemStyle: {
                                normal: {
                                    // color: 各异,
                                    label: {
                                        show: false
                                            // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                                            //           'inside'|'left'|'right'|'top'|'bottom'
                                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                    },
                                    lineStyle: {
                                        width: 2,
                                        type: "solid",
                                        shadowColor: "rgba(0,0,0,0)", //默认透明
                                        shadowBlur: 5,
                                        shadowOffsetX: 3,
                                        shadowOffsetY: 3
                                    }
                                },
                                emphasis: {
                                    // color: 各异,
                                    label: {
                                        show: false
                                            // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                                            //           'inside'|'left'|'right'|'top'|'bottom'
                                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                    }
                                }
                            },
                            data: this.body
                        }] //放每一项展示的数据的
                };
                // 绘制图表
                myChart.setOption(option);
            },
            initPieChart() {
                var myChart = echarts.init(document.getElementById('pie'));
                var option = {
                    //提示框
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    // 图表标题
                    title: {
                        text: this.title,
                        show: this.pieStyle.showTitle,
                        x: "center", // 水平安放位置，默认为左对齐，可选为：
                        // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}（x坐标，单位px）
                        y: "10", // 垂直安放位置，默认为全图顶端，可选为：
                        // 'top' ¦ 'bottom' ¦ 'center'
                        // ¦ {number}（y坐标，单位px）
                        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
                        // backgroundColor: 'rgba(0,0,0,0)',
                        // borderColor: '#ccc',       // 标题边框颜色
                        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
                        padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
                        // 接受数组分别设定上右下左边距，同css
                        itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
                        textStyle: {
                            fontSize: this.pieStyle.fontHVal,
                            // fontWeight: 'bolder',
                            color: this.pieStyle.hColor // 主标题文字颜色
                        },
                        subtextStyle: {
                            color: "#aaa" // 副标题文字颜色
                        }
                    },
                    color: [
                        this.pieStyle.bodyColor1,
                        this.pieStyle.bodyColor2,
                        this.pieStyle.bodyColor3,
                        this.pieStyle.bodyColor4,
                        this.pieStyle.bodyColor5
                    ], //拆线的主颜色
                    // color: ["#0384df", "#86d8dd", "#86d8aa", "#86d8ff", "#8238dd"], //线条的主颜色
                    legend: {
                        //指标位置
                        x: "10%",
                        y: "15%",
                        padding: 2,
                        // itemWidth: 10,
                        // borderRadius: 20,
                        // width: 10,
                        textStyle: {
                            fontSize: 10
                        },
                        data: ["移动", "联通", "电信"]
                            // data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
                    },
                    calculable: true,
                    series: [{
                            name: "当日净增通话客户数",
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "60%"],
                            // data: [335, 310, 234]
                            data: [{
                                    value: 335,
                                    name: "移动"
                                }, {
                                    value: 310,
                                    name: "联通"
                                }, {
                                    value: 234,
                                    name: "电信"
                                }]
                                // data: [
                                //   { value: 335, name: "直接访问" },
                                //   { value: 310, name: "邮件营销" },
                                //   { value: 234, name: "联盟广告" },
                                //   { value: 135, name: "视频广告" },
                                //   { value: 1548, name: "搜索引擎" }
                                // ]
                        }] //放每一项展示的数据的
                };
                myChart.setOption(option);
            }
        },
        // Page Events
        on: {
            // pageInit: function(e, page) {
            //   console.log('pageInit', page);
            // },
        }
    }
</script>